<template>
	<uni-popup ref="popup" type="center">
		<view class="select-poster">
			<view class="select-poster-swiper">
				<swiper class="swiper" :indicator-dots="false" :autoplay="false" :duration="1000" :current="current"
					@change="onChange">
					<swiper-item class="swiper-item" v-for="item,index in completePosterList" :key="index">
						<view class="poster-wrapper" :class="{'current':current===index}">
							<image :src="item" class="poster"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="close-btn" @click="close">
				<i class="iconfont icon-close icon" />
			</view>
			<view class="btn-wrapper">
				<g-button btn_text="保存图片" :width="574" :height="100" @click="savePoster"></g-button>
			</view>
		</view>
	</uni-popup>
</template>

<script lang="ts">
	export default {
		options: {
			styleIsolation: 'shared'
		},
	}
</script>


<script lang="ts" setup>
	import { Ref, ref, defineProps, defineExpose } from 'vue';
	import { IPosterSelectorExpose } from './types';
	import { useStore } from 'vuex';

	const store = useStore();

	const popup : Ref<any> = ref(null);

	const current : Ref<number> = ref(0);
	const props = defineProps({
		completePosterList: {
			type: Array,
		}
	});
	console.log(props.completePosterList)
	const onChange = (e) => {
		console.log('onChange', e.detail.current)
		current.value = e.detail.current;
	}

	const open = () => {
		popup.value.open();
	}

	const close = () => {
		popup.value.close();
	}

	const savePoster = () => {
		// console.log(current.value)
		// #ifdef H5
		const aEle = document.createElement('a');
		aEle.download = `${store.state.userInfo.nickname}的团队分享海报`;
		aEle.href = (props.completePosterList![current.value] as string);
		document.body.appendChild(aEle);
		aEle.click();
		aEle.remove();
		// #endif

		// #ifdef MP-WEIXIN
		uni.saveImageToPhotosAlbum({
			filePath: (props.completePosterList![current.value] as string),
			success: () => {
				uni.prompt.$showToast('保存成功')
			}
		})
		// #endif
	}

	defineExpose<IPosterSelectorExpose>({
		open
	})
</script>

<style scoped lang="scss">
	@import "./selectPoster.scss";
</style>